<template>
  <div
    v-if="isExternal"
    :class="className"
    :style="externalStyleIcon"
    class="svg-external-icon svg-icon"
  ></div>
  <div v-else :class="className">
    <span class="svg-container">
      <svg aria-hidden="true" :fill="color">
        <use :xlink:href="iconName"></use>
      </svg>
    </span>
  </div>
</template>
<script setup>
import { defineProps, computed } from 'vue'
import { isExternal as external } from '@/utils/validate'
const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  className: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#fff'
  }
})
// 判断是不是外部图标
const isExternal = computed(() => external(props.icon))
// 外部图标样式处理
const externalStyleIcon = computed(() => {
  return {
    mask: `url(${props.icon}) no-repeat center center`
  }
})
// 内部图标
const iconName = computed(() => `#icon-${props.icon}`)
</script>
<style lang="scss" scoped>
.svg-container {
  display: block;
  width: 20px;
  height: 25px;
  svg {
    width: 100%;
    height: 100%;
    color: #fff;
  }
}
</style>
